<p>This is a more complete example with a service that simulates server calling:</p>

<ul>
	<li>an observable async service to fetch a list of countries</li>
	<li>sorting, filtering and pagination</li>
	<li>simulated delay and loading indicator</li>
	<li>debouncing of search requests</li>
</ul>

<form>
	<div class="mb-3 row">
		<label for="table-complete-search" class="col-xs-3 col-sm-auto col-form-label">Full text search:</label>
		<div class="col-xs-3 col-sm-auto">
			<input
				id="table-complete-search"
				type="text"
				class="form-control"
				name="searchTerm"
				[(ngModel)]="service.searchTerm"
			/>
		</div>
		@if (service.loading$ | async) {
			<span class="col col-form-label">Loading...</span>
		}
	</div>

	<table class="table table-striped">
		<thead>
			<tr>
				<th scope="col">#</th>
				<th scope="col" sortable="name" (sort)="onSort($event)">Country</th>
				<th scope="col" sortable="area" (sort)="onSort($event)">Area</th>
				<th scope="col" sortable="population" (sort)="onSort($event)">Population</th>
			</tr>
		</thead>
		<tbody>
			@for (country of countries$ | async; track country.id) {
				<tr>
					<th scope="row">{{ country.id }}</th>
					<td>
						<img
							[src]="'https://upload.wikimedia.org/wikipedia/commons/' + country.flag"
							[alt]="'The flag of ' + country.name"
							class="me-2"
							style="width: 20px"
						/>
						<ngb-highlight [result]="country.name" [term]="service.searchTerm" />
					</td>
					<td><ngb-highlight [result]="country.area | number" [term]="service.searchTerm" /></td>
					<td><ngb-highlight [result]="country.population | number" [term]="service.searchTerm" /></td>
				</tr>
			} @empty {
				<tr>
					<td colspan="4" style="text-align: center">No countries found</td>
				</tr>
			}
		</tbody>
	</table>

	<div class="d-flex justify-content-between p-2">
		<ngb-pagination [collectionSize]="(total$ | async)!" [(page)]="service.page" [pageSize]="service.pageSize">
		</ngb-pagination>

		<select class="form-select" style="width: auto" name="pageSize" [(ngModel)]="service.pageSize">
			<option [ngValue]="2">2 items per page</option>
			<option [ngValue]="4">4 items per page</option>
			<option [ngValue]="6">6 items per page</option>
		</select>
	</div>
</form>
